<script setup lang="ts">
  import { ref } from 'vue'
  import sendLogDetailService from '../service/sendLogDetail'

  const { sendLogDetail, getSendLogDetailLoading, getSendLogDetailFn } = sendLogDetailService

  const props = defineProps({
    smsId: {
      type: String,
      required: true,
    },
  })

  // 弹窗状态
  const modalVisible = ref(false)

  // 显示弹窗
  const onShowModal = async () => {
    modalVisible.value = true
    await getSendLogDetailFn(props.smsId)
  }
</script>

<template>
  <div>
    <div style="display: inline-block; display: flex; align-items: center" @click="onShowModal">
      <slot></slot>
    </div>

    <h-dialog
      title="短信详情"
      v-model="modalVisible"
      :loading="getSendLogDetailLoading"
      :width="800"
    >
      <div class="info_list" v-if="sendLogDetail">
        <!-- 模版名称 -->
        <div class="info_item">
          <div class="label">模版名称:</div>
          <div class="value">{{ sendLogDetail.name }}</div>
        </div>

        <!-- 短信类型 -->
        <div class="info_item">
          <div class="label">短信类型:</div>
          <div class="value">
            <template v-if="sendLogDetail.type === 1">验证类短信</template>
            <template v-else-if="sendLogDetail.type === 2">通知类</template>
            <template v-else>推广类短信</template>
          </div>
        </div>

        <!-- 短信内容 -->
        <div class="info_item">
          <div class="label">短信内容:</div>
          <div class="value">{{ sendLogDetail.smsContent }}</div>
        </div>

        <!-- 发送结果 -->
        <div class="info_item">
          <div class="label">发送结果:</div>
          <div class="value">
            <HStatus type="success" v-if="sendLogDetail.success">
              <span style="font-size: 12px">发送成功</span>
            </HStatus>
            <HStatus type="error" v-else>
              <span style="font-size: 12px">发送失败</span>
            </HStatus>
          </div>
        </div>

        <!-- 接受者手机号 -->
        <div class="info_item">
          <div class="label">接收者手机号:</div>
          <div class="value">{{ sendLogDetail.receiveUserPhone }}</div>
        </div>

        <!-- 发送失败原因 -->
        <div class="info_item">
          <div class="label">发送失败原因:</div>
          <div class="value">{{ sendLogDetail.failtReason }}</div>
        </div>
      </div>

      <template #footer>
        <HButton is-modal @click="modalVisible = false">关闭</HButton>
      </template>
    </h-dialog>
  </div>
</template>

<style scoped lang="scss">
  .info_list {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .info_item {
      display: flex;
      column-gap: 5px;
      align-items: center;

      .label {
        color: #606266;
        min-width: 100px;
        text-align: right;
      }
    }
  }
</style>
